<template>
  <div id="sliderbar" class="sliderbar">
    <div class="div-funcs">
      <dl class="dl-riversurvey dem" @click="playRiverSurvey">
        <dd />
        <dt>河湖概况</dt>
      </dl>
      <dl class="dl-layers" @click="showIndex = 0">
        <dd />
        <dt>专题图层</dt>
      </dl>
      <dl class="dl-subject image" @click="showIndex = 1">
        <dd />
        <dt>专题展示</dt>
      </dl>
      <dl class="dl-bookmark dem" @click="showIndex = 2">
        <dd />
        <dt>书签</dt>
      </dl>
      <dl class="dl-plot dem" @click="showIndex = 4">
        <dd />
        <dt>标绘</dt>
      </dl>
      <dl class="dl-poi dem" @click="showIndex = 3">
        <dd />
        <dt>地名查询</dt>
      </dl>
    </div>

    <div v-show="showIndex != -1" class="div-funcpanel animated fadeInLeft">
      <div>
        <div style="text-align: right">
          <i
            type="text"
            class="mapModulePanelClose el-icon-close"
            @click="showIndex = -1"
          />
        </div>
        <el-divider/>
      </div>
      <!-- 专题图层 -->
      <div v-show="showIndex == 0" style="height: calc(100% - 25px);position:relative;">
        <layerTree
          v-show="moduleSelectedIndex===0"
          ref="layerTree"
          :layers="mapTree"
          :is-layer="isLayer"
          :is-query="isQuery"
          :is-echart="isEchart"
          :is-legend="isLegend"
          :is-slider="isSlider"
          :checked-ids="checkedIds"
          @onNodeChecked="onNodeChecked"
          @onChange="onChange"
          @onLegendShow="onLegend"
          @onEchart="onEchart"
          @onQuery="onQuery"
          @onLocateTo="onLocateTo"
        />
      </div>

      <!-- 专题展示 -->
      <div v-show="showIndex == 1" style="height: calc(100% - 25px);position:relative;">
        <special-exhibition />
      </div>

      <!-- 书签 -->
      <div v-show="showIndex == 2" style="height: calc(100% - 25px);position:relative;">
        <book-mark />
      </div>

      <!-- 地名地址 -->
      <div v-show="showIndex == 3" style="height: 100% ;position:relative;">
        <POI />
      </div>

      <!-- 标绘 -->
      <div v-show="showIndex == 4" style="height: calc(100% - 25px);position:relative;">
        <PlotPanel />
      </div>
    </div>
  </div>
</template>

<script>
import BookMark from '@/pages/yzt/components/bookmark' // 书签列表
import POI from '@/pages/yzt/components/poi'
import LayerTree from '@/components/layerTree'
import PlotPanel from '@/pages/yzt/components/plotPanel'
import SpecialExhibition from '@/pages/yzt/components/specialExhibition'
import { mapGetters, mapState } from 'vuex'
export default {
  name: 'SliderBar',
  components: {
    BookMark,
    POI,
    LayerTree,
    PlotPanel,
    SpecialExhibition
  },
  data() {
    return {
      showdrawer: false,
      showIndex: -1,
      search: '',
      checkedIds: [],
      bplayRiverSurvey: false
    }
  },
  methods: {
    // 图层定位
    onLocateTo(data) {
      this.mapServiceRight.setMapBoundsByLayerBounds(data)
    },
    // 查询事件
    onQuery(data) {
      this.$store.commit('eswyzt/setCurrentSearchLayer', data)
      this.$store.commit('eswyzt/setIsShowAttribute', true)
    },
    // 统计事件
    onEchart(data) {},
    // 图例事件
    onLegend(data) {
      this.$store.commit('eswyzt/setCurrentSearchLayer', data)
      this.$store.commit('eswyzt/setShowLayerLegend', true)
    },
    // 图例
    isLegend(node, data) {
      return data.legendurl
    },
    // 透明的
    isSlider(node, data) {
      return data.attribute === '' && data.isVisible
    },
    // Echart图标
    isEchart(node, data) {
      return false && data.isVisible
    },
    // 查询
    isQuery(node, data) {
      return data.attribute !== '' && data.isVisible
    },
    // 图层
    isLayer(node, data) {
      return !data.pid
    },

    // 透明事件
    onChange($event, data) {
      this.mapServiceLeft.setOpacityValue(1 - $event / 100, data)
      this.mapServiceRight.setOpacityValue(1 - $event / 100, data)
    },

    // 图层选中
    onNodeChecked(node, data) {
      this.lookForLayers([data], node)
    },

    // 查找图层
    async lookForLayers(layers, node) {
      for (let i = 0; i < layers.length; i++) {
        var item = layers[i]
        // 目录
        if (item.children && item.children.length > 0) {
          await this.lookForLayers(item.children, node)
        } else { // 图层
           this.openOrCloseLayer(item, node)
        }
      }
    },

    // 打开图层
    openOrCloseLayer(layer, node) {
      var visible = node.checkedKeys ? node.checkedKeys.indexOf(layer._id) != -1 : true
      this.$set(layer, 'isVisible', visible)
      this.mapServiceLeft.setLayerVisible(visible, layer, undefined)
      this.mapServiceRight.setLayerVisible(visible, layer, undefined)
    },

    // 地图切换
    onBaseLayerChanged(ids) {
      this.$refs['layerTree'].setCheckedLayers(ids)
    },

   // 地图切换
    onLayerChanged(id) {
      this.$refs['layerTree'].setCheckedLayerById(id)
    },
    playRiverSurvey() {
      this.bplayRiverSurvey = !this.bplayRiverSurvey
      this.bus.$emit('playRiverSurvey', this.bplayRiverSurvey)
    }
  },
  computed: {
    ...mapGetters('user', ['allLayers', 'mapTree']),
    ...mapState({
      moduleSelectedIndex(state) {
        return state.eswyzt.mapModuleIndex
      },

      mapServiceLeft(state) {
        return state.eswyzt.mapServiceLeft
      },
      mapServiceRight(state) {
        return state.eswyzt.mapServiceRight
      }
    })
  },
  mounted() {
    this.bus.$on('onBaseLayerChanged', this.onBaseLayerChanged)
    this.bus.$on('onLayerChanged', this.onLayerChanged)
  },
  beforeDestroy() {
     this.bus.$off('onBaseLayerChanged', this.onBaseLayerChanged)
      this.bus.$off('onLayerChanged', this.onLayerChanged)
  }
}
</script>

<style>
  #sliderbar .el-divider{
    margin: 2px 0;
  }
</style>

<style scoped>
.sliderbar {
  position: absolute;
  height: 100%;
  width: 88px;
  background-color: #063350;
  left: 0;
  top: 0;
  z-index: 999;
}

.div-funcs {
  width: 88px;
  text-align: center;
  padding-top: 60px;
}

.div-funcs dl {
  margin: 40px 0;
  color: #ccc;
}

.div-funcs dl:hover {
  cursor: pointer;
  color: #fff;
}

.div-funcs dd {
  width: 50px;
  height: 50px;
  margin: 6px auto;
}

.dl-layers dd {
  background: url(../../../../assets/img/yzt/subjectLayer.png);
}

.dl-subject dd {
  background: url(../../../../assets/img/yzt/subjectShow.png);
}

.dl-bookmark dd {
  background: url(../../../../assets/img/yzt/bookmark.png);
}

.dl-poi dd {
  background: url(../../../../assets/img/yzt/poi.png);
}

.dl-plot dd {
  background: url(../../../../assets/img/yzt/plot.png);
}

.dl-riversurvey dd{
  background: url(../../../../assets/img/yzt/riverSurvey.png);
}

.div-funcpanel {
  position: absolute;
  top: 0;
  left: 88px;
  height: 100%;
  width: 340px;
  background-color: #063350;
  border-left: 1px solid #bbb;
}

.mapModulePanelClose {
  font-size: 16px;
  transition: transform 0.3s;
  color: #fff;
  padding: 3px;
  cursor: pointer;
}

.mapModulePanelClose:hover {
  color: #398f86ff;
}
</style>
